<!doctype html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>常用组件</title>
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

		<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
		<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
		<!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.cn/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.cn/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
	</head>
	<body>
		<div style="width: 300px;">
		<div class="exzoom" id="exzoom">
		    <!--大图区域-->
		    <div class="exzoom_img_box">
		        <ul class='exzoom_img_ul'>
		            <li><img src="img/img01.jpg"/></li>
		            <li><img src="img/img02.jpg"/></li>
		            <li><img src="img/img03.jpg"/></li>
		            <li><img src="img/img04.jpg"/></li>
		            <li><img src="img/img05.jpg"/></li>
		            <li><img src="img/img06.jpg"/></li>
		            <li><img src="img/img07.jpg"/></li>
		            <li><img src="img/img08.jpg"/></li>
		        </ul>
		    </div>
		    <!--缩略图导航-->
		    <div class="exzoom_nav"></div>
		    <!--控制按钮-->
		    <p class="exzoom_btn">
		        <a href="javascript:void(0);" class="exzoom_prev_btn"> &lt; </a>
		        <a href="javascript:void(0);" class="exzoom_next_btn"> &gt; </a>
		    </p>
		</div>
		</div>
		<link rel="stylesheet" href="css/jquery.exzoom.css">
		<script src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script>
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
		<script src="js/jquery.exzoom.js"></script>
		<script>
			
			$("#exzoom").exzoom({
			    autoPlay: false,
			});//方法调用，务必在加载完后执行
			    
			
		</script>


	</body>
</html>
